import styled from 'styled-components'
import policeLogo from '@/assets/img/police.png'
import footerImg from '@/assets/img/foot_enter_new.png' 
import fontImg from '@/assets/img/foot_enter_tt.png'
export const FooterrWrapper = styled.div`
    position: relative;
    height: 172px;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
    display:flex;
    .footerLeft{
        flex:1;
        display:flex;
        justify-content: flex-end;
        padding-top:15px;
        .footerLeftWrapper{
            width:520px;
            .row{
                line-height:24px;
                font-size:12px;
                color:#666;
            }
            .link{
                .line{
                    margin: 0 8px 0 10px;
                    color: #c2c2c2;
                }
                a {
                        color:#999;
                    }
            }
            .span{
                margin-right:14px;
            }
            .police-logo{
                display:inline-block;
                width: 14px;
                height: 14px;
                background: url(${policeLogo}) no-repeat;
                background-size: cover;
                display: inline-block;
                margin-right: 2px;
                vertical-align: -2px;
            }
           
        }
    }
    .footerRight{
        flex:1;
        display:flex;
        justify-content: flex-start;
        ul {
            width: 420px;
            margin-top: 33px;
            display:flex;
            justify-content:space-between;
            margin-left:120px;
            li{
                a{
                    background: url(${footerImg}) no-repeat;
                    background-size: 110px 552px;
                    display: block;
                    width: 50px;
                    height: 45px;
                }
                .row1{
                    background-position: -63px -456.5px;
                }
                .row2{
                    background-position: -63px -101px;
                }
                .row3{
                    background-position: 0 0;
                }
                .row4{
                    background-position: -60px -50px;
                }
                .row5{
                    background-position: 0 -101px;
                }
                span{
                    display: inline-block;
                    background: url(${fontImg}) no-repeat;
                    background-size: 180px 139px;
                    margin: 5px  0;
                    text-align:center;
                    width: 52px;
                    height: 14px;  
                }
                .rowSpan1{
                    background-position: 0 -108px;
                    margin-left: -12px;
                    width: 72px;
                }
                .rowSpan2{
                    background-position: -1px -91px;
                    
                }
                .rowSpan3{
                    background-position: 0 0;
                }
                .rowSpan4{
                    background-position: 0 -54px;
                }
                .rowSpan5{
                    background-position: -1px -72px;
                }

            }
        }
    }
`